<template>
	<view class="page">
		<!-- 内容区 -->
		<view class="padding-40 borderRadius-40 content-section">
			<view class="width-630 height-228">
				<image :src="memoryList.top_image" mode="" style="width: 100%; height: 100%;"></image>
			</view>

			<view class="fontSize-28 color-666 marginBottom-20 marginTop-60 lineheight">
				{{memoryList.title1}}
			</view>
			<view class="fontSize-28 color-666 marginBottom-20 lineheight">
				<span v-html='memoryList.title2'></span>
			</view>
			<view class="fontSize-28 color-666 lineheight">
				{{memoryList.title3}}
			</view>
			<view class="fontSize-30 color-333 marginTop-80">
				{{memoryList.title4}}
			</view>
		</view>
		<view class="marginTop-10 flex items-center  flex-center" @click="toggleCheckbox">
			<up-checkbox :customStyle="{marginBottom: '5px'}" label="" shape="circle" size="16px" usedAlone
				v-model:checked="reciteWordsShow" activeColor='#51D580'> </up-checkbox>
			<view class="fontSize-26 ">
				下次不再展示
			</view>
		</view>
		<!-- 按钮区 -->
		<view class="btn-section">
			<view
				class="borderRadius-92 colorBj-51D580 color-white fontSize-32 flex flex-center items-center btn marginTop-38"
				@click="next">
				回家看看
			</view>
			<view class="fontSize-32 color-51D580 btn text-center" @click="successShow = true">
				红旗老师“有家记忆法”
			</view>
		</view>
		<up-popup :show="successShow" mode='center'>
			<swiper class="swiper" circular :duration="duration" :indicatorDots="indicatorDots"
				indicator-color='rgba(235, 235, 235, 1)' indicator-active-color='rgba(81, 213, 128, 1)'
				@change='swiperChange'>
				<swiper-item v-for="(item,index) in descList" :key="index">
					<view class="swiper-item ">
						<view class="width-350 height-350" style="margin: 0 auto;">
							<image :src="item.pic" mode="" style="width: 100%; height: 100%;"></image>
						</view>
						<view class="fontSize-40 weight-700 color-333 text-center marginTop-40">
							{{item.title}}
						</view>
						<view class="fontSize-28 color-666 text-center  marginTop-20 paddingLeft-55 paddingRight-55">
							{{item.desc}}
						</view>
					</view>
				</swiper-item>
			<!-- 	<swiper-item>
					<view class="swiper-item ">
						<view class="width-350 height-350" style="margin: 0 auto;">
							<image :src="descList[1].pic" mode="" style="width: 100%; height: 100%;"></image>
						</view>
						<view class="fontSize-40 weight-700 color-333 text-center marginTop-40">
							{{descList[1].title}}
						</view>
						<view class="fontSize-28 color-666 text-center  marginTop-20 paddingLeft-55 paddingRight-55">
							{{descList[1].desc}}
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item ">
						<view class="width-350 height-350" style="margin: 0 auto;">
							<image :src="descList[2].pic" mode="" style="width: 100%; height: 100%;"></image>
						</view>
						<view class="fontSize-40 weight-700 color-333 text-center marginTop-40">
							{{descList[2].title}}
						</view>
						<view class="fontSize-28 color-666 text-center  marginTop-20 paddingLeft-55 paddingRight-55">
							{{descList[2].desc}}
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item ">
						<view class="width-350 height-350" style="margin: 0 auto;">
							<image :src="descList[3].pic" mode="" style="width: 100%; height: 100%;"></image>
						</view>
						<view class="fontSize-40 weight-700 color-333 text-center marginTop-40">
							{{descList[3].title}}
						</view>
						<view class="fontSize-28 color-666 text-center  marginTop-20 paddingLeft-55 paddingRight-55">
							{{descList[3].desc}}
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item ">
						<view class="width-350 height-350" style="margin: 0 auto;">
							<image :src="descList[4].pic" mode="" style="width: 100%; height: 100%;"></image>
						</view>
						<view class="fontSize-40 weight-700 color-333 text-center marginTop-40">
							{{descList[4].title}}
						</view>
						<view class="fontSize-28 color-666 text-center  marginTop-20 paddingLeft-55 paddingRight-55">
							{{descList[4].desc}}
						</view>
					</view>
				</swiper-item> -->
			</swiper>
			<view class="width-526 height-92 borderRadius-92 colorBj-51D580 color-white text-center btn2 fontSize-32"
				style="line-height: 92rpx;" @click='successShow = false'>
				知道了
			</view>
		</up-popup>

	</view>
</template>

<script setup>
	import {
		inject,
		ref
	} from 'vue'
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app'

	const guideApi = inject('guide')
	const getRemWordDescApi = inject('getRemWordDesc')
	const indicatorDots = ref(true)
	const duration = ref(500)
	const memoryList = ref({})
	const current = ref(0)
	const descList = ref([])

	// 介绍弹窗
	const successShow = ref(false)
		const reciteWordsShow=ref(true)
	onLoad(() => {
		reciteWordsShow.value=uni.getStorageSync('reciteWordsShow')||true
		guideApi().then(res => {
			console.log(res)
			memoryList.value = res
		})
		getRemWordDescApi().then(res => {
			console.log(res, 999999999)
			descList.value = res.stepDesc
		})
	})

	const toggleCheckbox = () => {
		reciteWordsShow.value = !reciteWordsShow.value;
	
	};
	const next = () => {
				uni.setStorageSync('reciteWordsShow',reciteWordsShow.value)
		uni.redirectTo({
			url: '/pagesA/memory/partition'
		})
	}
	const swiperChange = (e) => {
		current.value = e.detail.current
	}
</script>

<style lang="scss">
	.page {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.btn {
		width: 702rpx;
		height: 104rpx;
		line-height: 104rpx;
	}

	.content-section {
		background-color: rgba(81, 213, 128, 0.08);
		padding-bottom: 200rpx;

	}

	.btn-section {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	@media (max-height: 800px) {
		.content-section {
			padding-bottom: 20rpx;

		}

		.btn-section {
			bottom: 0;
		}
	}

	.lineheight {
		line-height: 40rpx;
	}


	.swiper {
		width: 600rpx;
		height: 900rpx;
		padding: 32rpx;
		box-sizing: border-box;
		position: relative;
	}

	.swiper-item {
		margin: 0 auto;
		height: 900rpx;

	}

	::v-deep .u-popup__content {
		border-radius: 44rpx;
	}

	.btn2 {
		margin: 20rpx auto;
	}
</style>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>